<script setup lang="ts">
import Main from "@/views/Main.vue";
import { ref } from "vue";
import zh from "element-plus/es/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/en";
// 组件的国际化
let locale = ref(localStorage.getItem("language") == "zh" ? zh : en);
// 改变组件的语言
const changeLocale = () => {
  locale.value = localStorage.getItem("language") == "zh" ? zh : en;
};
// 在components中定义的组件可以不需要引入
// import type AsideMenu from '@/components/navigation/AsideMenu.vue';
// import BreadCrumb from '@/components/navigation/BreadCrumb.vue';
// import ChangeSize from '@/components/changesize/ChangeSize.vue';
// import FullScreen from '@/components/fullscreen/FullScreen.vue';
// import UserInfo from '@/components/admin/UserInfo.vue';

// ref中包含的值页面渲染不需要value但是操作需要value
let isCollapse = ref(false); // 是否展开
const changeMenu = (): void => {
  //切换展开
  isCollapse.value = !isCollapse.value;
};

let size: any = ref(localStorage.getItem("size") || "default"); //尺寸

// 改变尺寸组件的事件触发发函数
const getSize = (data: string) => {
  size.value = data;
  // console.log(size.value)
};
</script>

<template>
  <div class="common-layout">
    <el-config-provider :size="size" :locale="locale">
      <el-container>
        <!-- 左边 -->
        <el-aside width="auto">
          <el-scrollbar height="100vh">
            <!-- 侧边菜单 -->
            <AsideMenu :isCollapse="isCollapse" />
          </el-scrollbar>
        </el-aside>
        <!-- 右边 -->
        <el-container class="right">
          <el-header>
            <div class="header">
              <div>
                <el-icon
                  :size="28"
                  @click="changeMenu"
                  :style="{
                    transform: 'rotate(' + (isCollapse ? 0 : 180) + 'deg)',
                    transition: '.5s',
                  }"
                >
                  <Expand />
                </el-icon>
                <BreadCrumb />
              </div>
              <div class="flex-c-c">
                <FullScreen style="margin-right: 10px" />
                <ChangeSize style="margin-right: 10px" @emit-size="getSize" />
                <CutLanguage style="margin-right: 10px" @emit-locale="changeLocale" />
                <UserInfo />
              </div>
            </div>
            <Tags />
          </el-header>
          <el-main>
            <Main />
          </el-main>
        </el-container>
      </el-container>
    </el-config-provider>
  </div>
</template>

<style scoped lang="less">
.el-aside {
  max-height: 100vh;
}

.right {
  width: calc(100% - 200px);

  .el-header {
    height: 110px;
    padding: 0;

    .header {
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
    }
  }

  .el-main {
    padding: 30px;
    height: calc(100vh - 120px);
  }
}
</style>
